<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Spotify Authorization</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link href="/auth_assets/main.css" rel="stylesheet" />
    <script src="/auth_assets/main.js"></script>
  </head>

  <body>
    <main>
      <div class="flex justify-center flex-wrap logo">
        <div class="w-1/8">
          <img src="/auth_assets/logo.svg" width="120" height="120" />
        </div>
      </div>
      <div id="error" class="hidden">
        <h1 class="text-4xl">Error!</h1>
        <p class="text-xl mx-2">
          Spotify Authorization was not successful. You may want to retry.
        </p>
      </div>
      <div id="success" class="hidden">
        <h1 class="text-4xl">Success!</h1>
        <p class="text-xl mx-2">
          Spotify Authorization was successful. You can close this tab and go
          back to your app.
        </p>
      </div>
      <div class="text-center py-4 lg:px-4 my-6">
        <div
          class="p-2 bg-teal-800 items-center text-teal-100 leading-none lg:rounded-full flex lg:inline-flex"
          role="alert"
        >
          <span
            class="flex rounded-full bg-teal-500 uppercase px-2 py-1 text-xs font-bold mr-3"
            >Tip</span
          >
          <span class="font-semibold mr-2 text-left flex-auto">
            If the app does not detect the authorization, make sure you use one
            of the following supported Browsers:
            <b>Chrome</b>, <b>Edge</b> or <b>Firefox</b>
          </span>
        </div>
      </div>
    </main>
  </body>
</html>
